<template>
  <div class="header">
    <el-row class="container">
      <el-col :span="4" :xs="24" class="logo">
        <el-link href="/" :underline="false"><el-image :src="logo" /></el-link>
        <span class="icon" v-if="navShow" @click="navigation"></span>
      </el-col>
      <el-col :span="20" :xs="24" class="nav">
        <el-link href="https://cn.ceibs.edu/" target="_blank" :underline="false"
          >学院首页</el-link
        >
        <el-link
          href="https://cn.ceibs.edu/fmba"
          target="_blank"
          :underline="false"
          >FMBA首页</el-link
        >
        <el-link href="#footer" :underline="false">联系我们</el-link>
        <el-link
          href="https://application.ceibs.edu/FMBAApplication/goToChangePswd_c.do"
          target="_blank"
          :underline="false"
          >修改密码</el-link
        >
        <el-link href="https://usercentre.ceibs.edu/login?" :underline="false"
          >安全退出</el-link
        >
      </el-col>
    </el-row>
  </div>
  <div class="banner">
    <div class="btext">
      <h4>中欧金融MBA报名服务中心</h4>
      <p>CEIBS Finance MBA ( FMBA ) Service Centre</p>
    </div>
    <div class="banner_nav">
      <div
        class="nav-item"
        v-for="item in list"
        :class="{ current: item.path == current }"
        :key="item.id"
        @click="onTabs(item.path)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import logo from "../../assets/images/logo.png";
export default {
  props: {},
  data() {
    return {
      logo: logo,
      list: [
        { name: "我的FMBA", id: 1, path: "/" },
        { name: "正式报名", id: 2, path: "/enroll" },
        { name: "学习中心", id: 3, path: "/study" },
      ],
      current: this.$route.path,
      show: this.$store.state.show,
      navShow: false,
    };
  },
  created() {},
  methods: {
    onTabs(path) {
      this.$router.push({
        path,
      });
    },
    navigation() {
      this.show = !this.show;
      this.$store.commit("getShow", this.show);
    },
  },
  computed: {
    getshow() {
      return this.$store.state.show;
    },
  },
  mounted() {
    let to = this.$route;
    this.current = to.path;
    if (to.matched.length > 0 && to.matched[0].name === "index") {
      this.current = "enroll";
      this.navShow = true;
    } else {
      this.navShow = false;
    }
  },
  watch: {
    $route(to) {
      this.current = to.path;
      if (to.matched.length > 0 && to.matched[0].name === "index") {
        this.current = "/enroll";
        this.navShow = true;
      } else {
        this.navShow = false;
      }
    },
    getshow(to) {
      this.show = to;
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  background: #ffffff;
  .container {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      img {
        height: 30px;
      }
      .icon {
        float: right;
        display: none;
        width: 20px;
        height: 20px;
        background: url("../../assets/images/menu.png") no-repeat;
        background-size: 100% auto;
      }
    }
    .nav {
      text-align: right;
      a {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #898989;
        display: inline-block;
        padding: 0 20px;
        border-right: 1px solid #dedede;
        &:hover {
          color: #c6a67d;
        }
        &:last-child {
          padding-right: 0;
          border-right: 0;
        }
      }
    }
  }
}
.banner {
  overflow: hidden;
  height: 380px;
  background: url(../../assets/images/banner.png) no-repeat center 0;
  background-size: 100% 380px;
  background-position: top center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .btext {
    flex: 1;
    width: 1000px;
    padding-top: 69px;
    padding-left: 36px;
    h4 {
      height: 40px;
      font-size: 40px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 15px;
    }
    p {
      height: 23px;
      font-size: 24px;
      font-family: Arial;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .banner_nav {
    width: 1000px;
    background: #003963;
    display: flex;
    .nav-item {
      cursor: pointer;
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #003963;
      border-radius: 5px 5px 0px 0px;
      flex: 1;
      font-size: 29px;
      font-family: HYQiHei;
      font-weight: normal;
      color: #ffffff;
    }
    .current {
      background: #c6a67d;
    }
  }
}

@media (max-width: 768px) {
  .header {
    width: 100%;
    background: #ffffff;
    .container {
      width: 95%;
      height: auto;
      flex-direction: column;
      align-items: flex-start;
      .logo {
        cursor: pointer;
        width: 95%;
        margin: 10px 0 0 10px;
        .el-image {
          height: 20px;
        }
        .icon {
          display: inline-block;
        }
      }
      .nav {
        margin: 10px 0 10px;
        a {
          font-size: 12px;
          padding: 0 10px;
          &:last-child {
            padding-right: 0;
          }
        }
      }
    }
  }
  .banner {
    width: 100%;
    height: 190px;
    background-size: cover;
    .btext {
      padding-top: 20px;
      width: 90%;
      h4 {
        font-size: 16px;
        height: auto;
      }
      p {
        font-size: 14px;
      }
    }
    .banner_nav {
      width: 90%;
      .nav-item {
        width: 30%;
        height: 40px;
        font-size: 16px;
      }
    }
  }
}
@media (max-width: 320px) {
  .header .container .nav a {
    padding: 0 5px;
  }
  .banner .banner_nav .nav-item {
    font-size: 14px;
  }
}
</style>
